<template>
    <div>
        <TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
        <div class="container">
            <TableCustom :columns="columns" :tableData="tableData" :total="page.total"
                :delFunc="handleDelete" :page-change="changePage" :editFunc="handleEdit">
                <template #f_status="{rows}">
                    <el-tag v-if="rows.f_status == 1" type="success">使用中</el-tag>
                    <el-tag v-else type="info">未使用</el-tag>
                </template>
                
            </TableCustom>

        </div>
        <el-dialog :title="isEdit ? '编辑' : '新增'" v-model="visible" width="700px" destroy-on-close
            :close-on-click-modal="false" @close="closeDialog">
            <TableEdit :form-data="rowData" :options="options" :edit="isEdit" :update="updateData"  :chooseArea="choseP"/>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="collaborativeAdministrator-user">
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { Place } from './types/place.js';
import TableCustom from '@/components/table-custom.vue';
import TableSearch from '@/components/table-search.vue';
import { FormOption, FormOptionList } from '@/types/form-option';

// 查询相关
const query = reactive({
    name: '',
    area: '',
});
// 查询条件相关
const searchOpt = ref<FormOptionList[]>([
    { type: 'input', label: '场所名称：', prop: 'name', placeholder: '请输入场所名称' }
])
const handleSearch = () => {
    console.log(query)
    changePage(1);
};

// 表格相关
let columns = ref([
    {type: 'selection'},
    { prop: 'f_field_name', label: '订单编号' },
    { prop: 'f_code', label: '眼镜芯片' },
    { prop: 'f_after_sales_account', label: '眼镜名称' },
    { prop: 'f_contacts_name', label: '租户名称' },
    { prop: 'f_contacts_phone', label: '补贴金额' },
    { prop: 'f_contacs_area', label: '订单时间' },

    { prop: 'f_cooperation_manager', label: '设备名称' },
    { prop: 'c_u_code', label: '场地名称' },
])
const page = reactive({
    page: 1,
    page_size: 10,
    total: 0,
})
const tableData = ref<Place[]>([]);
const getData = async () => {
};
getData();

const changePage = (val: number) => {
    page.page = val;
    getData();
};

// 新增/编辑弹窗相关
let options = ref<FormOption>({
    labelWidth: '150px',
    span: 20,
    list: [
        { type: 'select', label: '合作管理员', prop: 'f_cooperation_manager', required: true, placeholder: '请选择合作管理员' },
        { type: 'input', label: '场地名称', prop: 'f_field_name', required: true, placeholder: '请输入场地名称' },
        { type: 'custom_area', label: '所属区域', prop: 'custom_area', required: true, placeholder: '请选择所属区域' },

        { type: 'input', label: '联系人姓名', prop: 'f_contacts_name', required: true, placeholder: '请输入联系人姓名' },
        { type: 'input', label: '联系人电话', prop: 'f_contacts_phone', required: true, placeholder: '请输入联系人电话' },
        { type: 'input', label: '联系人地址', prop: 'f_contacs_area', required: true, placeholder: '请输入联系人地址' },
        
        
        { type: 'input', label: '场地售后员姓名', prop: 'f_after_sales_name', required: true, placeholder: '请输入场地售后员姓名' },
        { type: 'input', label: '场地售后员账户', prop: 'f_after_sales_account', required: true, placeholder: '请输入场地售后员账户' },

        { type: 'radio', label: '是否自动退还', prop: 'c_bank_code', required: true, placeholder: '请输入结算账号', opts: [{value: 1, label: '是'},{value: 0, label: '否'}] },
        { type: 'radio', label: '是否测试', prop: 'c_bank_real_name', required: true, placeholder: '请输入支行名称', opts: [{value: 1, label: '测试使用'},{value: 0, label: '正式使用'}]},
    ]
})
const visible = ref(false);
const isEdit = ref(false);
const rowData = ref({});
const handleEdit = (row: Place) => {
    row.custom_area = [`${row.f_province}`, `${row.f_city}`, `${row.f_area}`];
    rowData.value = { ...row };
    isEdit.value = true;
    visible.value = true;
};
const choseP = (data, value) => {
    data.f_province = value[0]
	data.f_city = value[1]
	data.f_area = value[2]
}
const updateData = async(value) => {

    const sentData = JSON.parse(JSON.stringify(value))
    delete sentData.custom_area
    delete sentData.c_bank_real_name 
    delete sentData.field_area
    delete sentData.c_bank_code 
    console.log(sentData)
};

const closeDialog = () => {
    visible.value = false;
    isEdit.value = false;
};

// 查看详情弹窗相关
const visible1 = ref(false);
const viewData = ref({
    row: {},
    list: []
});

// 删除相关
const handleDelete = (row: Place) => {
}
</script>

<style scoped></style>